{extend name="Public:centerheard" /}
{block name='body'}
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2" style="height:100%;">
    <div id="main" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <main class="gallery__main gallery__gallerypage">
            <div>
                <div class="toolbar__toolbar">
                    <button type="button" data-toggle="modal" data-target="#upload"><i class="icon_upload_image"></i>
                        <!-- react-text: 595 -->上传图片<!-- /react-text -->
                    </button>
                    <button type="button" data-toggle="modal" data-target="#upload_ad"><i class="icon_upload_video"></i>
                        <!-- react-text: 598 -->上传视频<!-- /react-text -->
                    </button>
                    <button id="up_img" type="button" data-toggle="modal" onclick="New_del()"><i
                            class="icon_create_gallery"></i>新建相册
                        <!-- react-text: 601 --><!-- /react-text -->
                    </button>
                    <div class="none_select toolbar__right">
                        <div class=" Input__tdmiddle Input__main toolbar__search ">
                            <div class=" Input__inputwrap Input__fullwidth ">
                                <span class="icon_search font_icon_16 Input__icon "></span>
                                <input type="text" class=" custom_scrollbar Input__input animate__startAnimate" onblur="search(this)" data-url="{:url('photos/index','','','')}"
                                       placeholder="搜索" id="t_10" value=""></div>
                        </div>
                    </div>
                </div>
                <div class="toolbar__selected toolbar__cardselected">
                    <label tabindex="0" class=" Checkbox__main ">
                        <input type="checkbox" value="on" id="Allright" onclick="check()">
                        <span class="Checkbox__icon Checkbox__checkbox"><i class="icon_correct_inline"></i></span>
                        <span class="Checkbox__label" id="check_all">全选</span></label></div>
            </div>
            <div class="none_select gallery__set mobilemargin">
                <div class="gallery__parent">
                    {volist name='list' id='vo'}
                    <div class="gallery__gallerylistcard gallery__card gallery__children"
                         style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                        <div class="gallery__gallerywrap">
                            <div id="{$vo.id}" title="{$vo.name}" name="{$vo.name}" class=" Image__main "
                                 onclick="check1(this)">
                                <img alt="" class=" Image__absolute Image__img " src="{$vo.img_url}">
                                <input type="text" style="display: none" name="all_pic" value="{$vo.id}">
                                <input type="text" style="display: none" id="all_num" value="{$num}">
                                <a tabindex="-1" class=" Image__clickhandle Image__space"
                                   style="padding-bottom: 100%;"></a>
                                <div class="Image__select" title=""><i
                                        class="icon_correct_inline Image__selecticon"></i></div>
                                <div class=" text_overflow Image__title gallery__photonumber ">{$vo.num}</div>
                                <div class="Image__actions">
                                    <div>
                                <span title="相册信息" class="gallery__action">
                                    <i class="icon_edit_album"></i>
                                </span>
                                    </div>
                                </div>
                            </div>
                            <div class="gallery__footer">
                                <div>
                                    <a title="进入相册" href="{:url('shop/photo/index',array('id'=>$vo['id']))}"><span class="text_overflow InlineEditor__value">{$vo.name}</span></a>
                                    <i class="icon_modify font_icon_12 InlineEditor__icon"></i>
                                </div>
                                <div class="gallery__state">{eq name='vo.status' value='1'}公开{else /}隐藏{/eq}</div>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div><!-- react-empty: 685 -->

            <!-- 上传图片 -->
            <div class="modal fade" id="upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <form action="{:url('shop/photos/photo_add')}" method="post">

                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                        data-target="#myModal">
                                    <span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="uploadLabel">上传图片</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="exampleInputNamel2">选择相册</label>
                                        <select class="form-control" id="exampleInputNamel2" style="width: 200px"
                                                name="album_id">
                                            {volist name='list' id='vo'}
                                            <option value="{$vo.id}">{$vo.name}</option>
                                            {/volist}
                                        </select>
                                        <input id="ImgUrl" name="ImgUrl" value="" style="display:none">
                                    </div>
                                    <div class="form-group" style="margin-left: 20px;">
                                        <label for="exampleInputEmail3">添加水印</label>
                                        <input type="text" name="code" class="form-control" id="exampleInputEmail3">
                                    </div>
                                </div>
                            </div>
                            <form enctype="multipart/form-data">
                                <input id="file-zh" name="file-zh[]" type="file" multiple>
                            </form>
                            <table class="gallery__input Progress__table"
                                   style="margin-top: 20px;width: 90%;margin-left: 5%">
                                <tbody>
                                <tr>
                                    <td class="Progress__label">使用空间：</td>
                                    <td class="Progress__progress">
                                        <div role="progressbar" class=" Progress__main">
                                            <div class="Progress__nextvalue" style="width: 3.97%;"></div>
                                            <div aria-valuenow="3.94" class="Progress__value " style="width: 3.94%;">
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 上传视频 -->
            <div class="modal fade" id="upload_ad" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <form action="{:url('shop/photos/video_add')}" method="post">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                        data-target="#myModal">
                                    <span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="upload_adLabel">上传视频</h4>
                            </div>
                            <div class="form-inline" style="margin: 15px 0">
                                <div class="form-group">
                                    <label for="video">选择相册</label>
                                    <select class="form-control" id="video" style="width: 300px" name="album_id">
                                        {volist name='list' id='vo'}
                                        <option value="{$vo.id}">{$vo.name}</option>
                                        {/volist}
                                    </select>
                                    <input id="Video_url" name="Video_url" value="" style="display:none">
                                </div>
                            </div>
                            <form enctype="multipart/form-data">
                                <input id="file-video" name="file-zh[]" type="file">
                            </form>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 新建相册 -->
            <div class="modal fade" id="new_pic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form method="post" action="{:url('shop/photos/add')}">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                        data-target="#myModal">
                                    <span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">新建相册</h4>
                            </div>
                            <div class="modal-body">
                                <p style="margin: 10px 0">名称：&nbsp;&nbsp;</p><input type="text" name="name"
                                                                                    class="form-control">
                                <p style="margin: 10px 0">描述：&nbsp;&nbsp;</p><textarea class="form-control"
                                                                                       name="describe"
                                                                                       rows="3"></textarea>
                                <p style="margin: 10px 0">分类：&nbsp;&nbsp;</p>
                                <select class="form-control" name="group_id">
                                    {volist name='group' id='vo'}
                                    <option value="{$vo.id}">{$vo.name}</option>
                                    {/volist}
                                </select>
                                <p style="margin: 10px 0">权限：&nbsp;&nbsp;</p>
                                <label class="radio-inline">
                                    <input type="radio" name="status" id="inlineRadio1" value="1" checked> 公开
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="status" id="inlineRadio2" value="0">
                                    隐藏(尽自己可见)
                                </label>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 删除相册 -->
            <div class="modal fade" id="del_pic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <form action="{:url('shop/photos/del')}" method="post">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                删除相册
                            </div>
                            <div class="modal-body" style="text-align: center">
                                <label>是否确认删除选中的相册？</label>
                            </div>
                            <input id="del_id" name="id" style="display: none">
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary">确定</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!--<input type="file" accept=".avi,.mp4,.flv,.mov,.3gp,.asf,.wmv,.mpg,.f4v,.m4v,.mkv,.vob" style="display: none;">-->
            <!--<div tabindex="0" data-noautoblur="true" class="Modal__backdrop backdrop Modal__noafter "></div>-->
        </main>
    </div>
</div>
<script>
    function New_del() {
        var up_img = document.getElementById("up_img")
        var str = up_img.innerHTML
        if (str == "删除") {
            $("#del_pic").modal('show')
        } else {
            $("#new_pic").modal('show')
        }
    }

    var i = 0;
    var arr = new Array()
    var pic_id = []
    arr = document.getElementsByName("all_pic")

    function check() {
        if (document.getElementById("Allright").checked) {
            i = document.getElementById("all_num").value
            document.getElementById("check_all").innerHTML = "已选中" + i + "项"
            $(document.getElementsByClassName("Image__main")).addClass("Image__checked")
            document.getElementById("up_img").innerHTML = "删除"
            for (var n = 0; n < arr.length; n++) {
                pic_id[n] = arr[n].value
            }
        } else {
            document.getElementById("check_all").innerHTML = "全选"
            $(document.getElementsByClassName("Image__main")).removeClass("Image__checked")
            document.getElementById("up_img").innerHTML = "<i class=\"icon_create_gallery\"></i>新建相册"
            i = 0;
            pic_id = []
        }
        document.getElementById("del_id").value = pic_id
    }

    function check1(obj) {
        var title = $(obj).attr('name')
        var css = $(obj).attr('class')
        var id = $(obj).attr('id')
        var val = document.getElementById(id)
        if (isContains(css, "Image__checked")) {
            console.log("i的值：" + i)
            i--;
            $(document.getElementsByName(title)).removeClass("Image__checked")
            document.getElementById("check_all").innerHTML = "已选中" + i + "项"
            if (i == 0) {
                document.getElementById("Allright").checked = false
                document.getElementById("check_all").innerHTML = "全选"
                document.getElementById("up_img").innerHTML = "<i class=\"icon_create_gallery\"></i>新建相册"
            }
            pic_id.remove(val.id)
        } else {
            i++;
            $(document.getElementsByName(title)).addClass("Image__checked")
            document.getElementById("Allright").checked = true
            document.getElementById("check_all").innerHTML = "已选中" + i + "项"
            document.getElementById("up_img").innerHTML = "删除"
            pic_id.push(val.id)
        }
        document.getElementById("del_id").value = pic_id
    }

    function isContains(str, substr) {
        return str.indexOf(substr) >= 0;
    }

    Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
</script>
{/block}